<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心</title>
    <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/common.css">
</head>

<body>

    <nav class="navbar navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./index.html">青鸟商城</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">热门推荐 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">国际品牌</a></li>
                    <li><a href="#">数码电器</a></li>
                    <li><a href="#">智能手机</a></li>
                    <li><a href="#">每日特价</a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="./ucenter.html">
                            <i class="glyphicon glyphicon-user"></i>
                            个人中心
                        </a>
                    </li>
                    <li>
                        <a href="#" id="btn-logout">
                            <i class="glyphicon glyphicon-off"></i>
                            安全退出</a>
                    </li>
                </ul>

            </div>
        </div>
    </nav>

    <div class="container user-info">
        <div class="row">
            <div class="col-xs-2">
                <ul class="nav nav-pills nav-stacked ">
                    <div class="avatar" data-toggle="modal" data-target="#avatar-modal">
                        <img src="./uploads/avatar/01.jpg" class="img-circle">
                        <div class="mask">
                            更换头像
                        </div>
                    </div>
                    <hr>
                    <li role="presentation" class="active"><a href="./ucenter.html">会员中心</a></li>
                    <li role="presentation"><a href="./order-list.html">我的订单</a></li>
                    <li role="presentation"><a href="./update-info.html">信息设置</a></li>
                    <li role="presentation"><a href="./reset-pwd.html">重置密码</a></li>
                    <li role="presentation"><a href="./address.html">收货地址</a></li>
                </ul>
            </div>
            <div class="col-xs-10" id="user-info">
                <!-- <h4>欢迎用户
                    <strong>
                        <a href="./update-info.html">jack</a>
                    </strong>
                    登录
                </h4>
                <hr>
                <p>当前时间: 2020-05-17 </p>
                <hr>
                <p>昵称: jackma</p>
                <hr>
                <p>联系电话: 10086</p>
                <hr>
                <p>电子邮箱: 10086@qq.com</p>
                <hr>
                <p>今日心情: 时间最廉价的就是一事无成的温柔和一贫如洗的真心</p> -->
            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">更换头像</h4>
                </div>
                <div class="modal-body avatar">
                    <img class="img-circle avatar-upload" src="./uploads/avatar/01.jpg" alt="选择头像" title="选择头像">
                    <div class="masker">
                        点击更换头像
                    </div>
                    <!-- 隐藏文件域 -->
                    <input type="file" id="avatar-file" accept=".jpg,.png,.gif" style="display:none" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" id="btn-upload-avatar" class="btn btn-danger">上传</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->

    <div class="container-fluid footer">
        <div class="row">
            <div class="col-lg-12">
                Copyright 2019 by www.braccp.com 北京畅想唯优信息技术有限公司 All rights reserved.
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                联系电话：029-88212666 地址：西安市雁塔区电子一路 石油大学北门工会楼二层
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                备案号：陕ICP备19013769号-1
            </div>
        </div>
    </div>
</body>
<script src="./assets/js/jquery.js"></script>
<script src="./assets/bootstrap/js/bootstrap.min.js"></script>
<script src="./assets/layer/layer.js"></script>
<script src="./assets/js/common.js"></script>

<script>
    $(function () {
        // 点击图片触发文件域的点击
        $(".avatar-upload,.masker").on('click', function () {
            $("#avatar-file").click();
        });
        // 上传头像
        $("#btn-upload-avatar").on('click', function () {
            $('#avatar-modal').modal('hide')
        });

        // 获取登录用户的信息
        $.get('/apis/index.php?c=user&a=login_info', {}, function (res) {
            // console.log(res);
            if (res.errcode === 0) {
                const userInfo = res.userInfo;
                var html = `<h4>欢迎用户
                    <strong>
                        <a href="./update-info.html">${userInfo.nickname||'暂无'}</a>
                    </strong>
                    登录
                </h4>
                <hr>
                <p>当前时间: 2020-05-17 </p>
                <hr>
                <p>联系电话: ${userInfo.tel||'暂无'}</p>
                <hr>
                <p>电子邮箱: ${userInfo.email||'暂无'}</p>
                <hr>
                <p>今日心情: ${userInfo.motto||'暂无'}</p>`;
                $("#user-info").html(html);
            } else {
                layer.msg('未登录, 请先登录');
                location.href = './login.html';
            }
        }, 'json');
        
    });
</script>

</html>